<template>
	<view class="fullContent bgf8">
		<view class="inputWrap bgw">
			<textarea v-model="content" placeholder="请详细描述您的问题或建议">

			</textarea>
		</view>
		<view class="imgWrap bgw">
			<view class="title">请提供相关问题的图片（{{tempFilePaths.length}}/8）</view>
			<view class="img">
				<view v-for="(item, i) in tempFilePaths" :key="i" style="position: relative;">
					<img :class="[(i+1)%4 === 0 ?'noMargin':'']" :src="baseUrl+item" @click="previewImage(i)" mode="">
					</img>
					<img :class="[(i+1)%4 === 0 ?'noMargindel':'']" class="del" src="../../static/bg/delImg.png"
						mode="" @click="delImg(i)"></img>
				</view>
				<view class="upload" @click="upload"></view>
			</view>
		</view>
		<view class="btnStyle" @click="submit">完成</view>
	</view>
</template>

<script>
	import {
		fankui
	} from '../../request/api.js'
	const app = getApp()
	export default {
		data() {
			return {
				baseUrl: '',
				content: '',
				tempFilePaths: [
					// {url: '../../static/bg/1.jpg'},
					// {url: '../../static/bg/1.jpg'},
					// {url: '../../static/bg/1.jpg'},
					// {url: '../../static/bg/1.jpg'},
				],
			};
		},
		onLoad() {
			this.baseUrl = getApp().globalData.baseUrlImg
			// console.log(app.globalData)
		},
		methods: {
			// 上传
			upload() {
				var that = this
				uni.chooseImage({
					count: 8, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: function (res) {
						let list = []
						let count = 0;
						let files = res.tempFilePaths
						uni.showLoading();
						files.forEach((item)=>{
							uni.uploadFile({
								url: getApp().globalData.baseUrl + '/Pub/uploadImg',
								filePath: item,
								name: 'file',
								header: {
									// 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
									'authoriztion': wx.getStorageSync('token')
								},
								success: uploadFileRes => {
									let ret = JSON.parse(uploadFileRes.data);
									count++;
									//如果是最后一张,则隐藏等待中  
									if (count == files.length) {
									    wx.hideLoading();
									}
									if (ret.code == '200') {
										let img = ret.data[0]
									    list.push(img) //待上传图片临时路径
										that.tempFilePaths = list
									} else {
									    wx.showToast({
									        title: ret.msg,
									        icon: "none",
									        duration: 1500
									    })
									}
								},
								fail: err => {
									uni.hideLoading();
									uni.showToast({
										title: '上传失败,请重新上传!',
										icon: 'none'
									});
								}
							});
						}) 
					}
				});
			},
			// 删除
			delImg(i) {
				this.tempFilePaths.splice(i, 1);
			},
			// 预览
			previewImage: function(index) {
				//uniapp预览轮播图
				// uni.previewImage({
				// 	current: index, //预览图片的下标
				// 	urls: this.tempFilePaths //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				// })
				//uniapp预览轮播图
				let imgs = []
				for(let i=0;i<this.tempFilePaths.length;i++){
					let str = this.baseUrl + this.tempFilePaths[i]
					imgs.push(str)
				}
				uni.previewImage({
					current: index, //预览图片的下标
					urls: imgs //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			// 提交
			submit() {
				if(!this.content){
					uni.showToast({
						title:'请输入反馈内容',
						icon:'none'
					})
					return
				}
				if (this.tempFilePaths.length == 0) {
				  wx.showToast({
				    title: '请上传图片',
				    icon: 'none'
				  })
				  return
				}
				let param = {
					type:2,
					content:this.content,
					imgs:this.tempFilePaths.toString()
				}
				fankui(param).then(res => {
					uni.showToast({
						title:'反馈成功',
						icon:'none'
					})
					setTimeout(function(){
						uni.navigateBack({
							delta: 1
						})
					},600)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fullContent {
		.inputWrap {
			padding: 30upx;
			height: 400upx;
			margin-bottom: 30upx;

			textarea {
				width: 100%;
			}
		}

		.imgWrap {
			padding: 40upx 30upx;

			.title {
				font-size: 28upx;
				color: #333333;
				margin-bottom: 52upx;
			}

			.img {
				display: flex;
				flex-wrap: wrap;

				.del {
					width: 40upx;
					height: 40upx;
					position: absolute;
					top: -20upx;
					right: -20upx;
				}
			}

			img {
				width: 152upx;
				height: 152upx;
				margin-bottom: 20upx;
				margin-right: 26upx;
			}

			.noMargin {
				margin-right: 0upx;
			}

			.noMargindel {
				top: -20upx !important;
				right: -44upx !important;
			}

			.upload {
				width: 152upx;
				height: 152upx;
				background: url(../../static/bg/upload2.png) no-repeat;
				background-size: 100% 100%;
				margin-bottom: 20upx;
			}
		}

		.btnStyle {
			margin: 80upx auto 0;
		}
	}
</style>
